<template>
  <el-container style="height: 100vh">
    <el-menu
      class="menu"
      :default-openeds="['0', '1', '2', '3']"
      :default-active="$route.path"
      active-text-color="#ffd04b"
      background-color="#545c64"
      text-color="#fff"
      :collapse="hideNav"
      router
    >
      <el-submenu
        v-for="(value, index) of data"
        :key="index"
        :index="`${index}`"
      >
        <template #title
          ><i :class="value.icon"></i>
          <span>{{ value.title }}</span>
        </template>
        <el-menu-item
          v-for="(v, i) of value.options"
          :key="i"
          :index="v.path"
          :route="v.path"
          >{{ v.title }}</el-menu-item
        >
      </el-submenu>
    </el-menu>

    <el-container>
      <el-header class="header">
        <i
          :class="[`el-icon-s-${hideNav ? 'unfold' : 'fold'}`, 'collapse-btn']"
          @click="
            () => {
              hideNav = !hideNav;
            }
          "
        ></i>
        <h2 class="flex-1">网上书店后台管理系统</h2>
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="loginout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>

      <el-main class="main">
        <router-view :key="$route.path"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import {
  ElContainer,
  ElMenu,
  ElSubmenu,
  ElMenuItemGroup,
  ElMenuItem,
  ElHeader,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElMain,
  ElIcon,
} from "element-plus";

const data = [
  {
    title: "订单管理",
    icon: "el-icon-s-order",
    options: [
      { title: "待发货列表", path: "/orders/list/1" },
      { title: "待收货列表", path: "/orders/list/2" },
      { title: "已完成列表", path: "/orders/list/3" },
      { title: "全订单列表", path: "/orders/list" },
    ],
  },
  {
    title: "图书管理",
    icon: "el-icon-s-management",
    options: [
      { title: "图书列表", path: "/books/list" },
      { title: "新增图书", path: "/books/create" },
    ],
  },
  {
    title: "图书分类管理",
    icon: "el-icon-s-grid",
    options: [
      { title: "图书分类列表", path: "/categories/list" },
      { title: "新增图书分类", path: "/categories/create" },
    ],
  },
  {
    title: "用户管理",
    icon: "el-icon-s-custom",
    options: [
      { title: "用户列表", path: "/users/list" },
      { title: "新增用户", path: "/users/create" },
    ],
  },
];

export default defineComponent({
  name: "Index",
  components: {
    ElContainer,
    ElMenu,
    ElSubmenu,
    ElMenuItemGroup,
    ElMenuItem,
    ElHeader,
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem,
    ElMain,
    ElIcon,
  },
  data() {
    return {
      data,
      hideNav: false,
    };
  },
  methods: {
    loginout() {
      localStorage.clear();
      this.$router.push("/login");
    },
  },
});
</script>

<style lang="scss">
body {
  background: rgba(0, 0, 0, 0.05);
}

.header {
  background-color: #fff;
  color: #000;
  line-height: 60px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;

  .collapse-btn {
    margin-right: 20px;
    cursor: pointer;
  }

  > .flex-1 {
    flex: 1;
  }
}

.menu:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu-item {
  height: 43px !important;
  line-height: 43px !important;
}

.main {
  padding: 0px !important;
}
</style>
